<template>
<div :class="[$style.container]">

  <div :class="[$style.toolbar]">
    <notice-nav :data="pageData"></notice-nav>
  </div>
  <paged-list :page-data="pageData">
    <template v-slot="{ row }">
       <div :class="[$style.item]" @click="markRead(row)">
          <div :class="[$style.checkbox]" @click.stop="">
            <el-checkbox v-model="row.checked"></el-checkbox>
          </div>
          <div :class="[$style.avatar]">
            <div :class="[$style.dot]" v-if="!row.hasRead"></div>
          </div>
          <div :class="[$style.content]">
            <div :class="[$style.header]">
              <div :class="[$style.title]">{{row.typeName}}</div>
              <div :class="[$style.datetime]">{{row.creationTime}}</div>
            </div>
            <div :class="[$style.text]">{{row.content}}</div>
          </div>
        </div>
    </template>
  </paged-list>
</div>
</template>

<script lang="ts">

import { PageData, PageQueryParams } from '@/config/page'
import { Vue, Component, Provide, Watch, Ref, Prop, Inject } from 'vue-property-decorator'
import { queryMessages, markRead, markReadByCategory, deteteInbatch, deleteAllByCategory } from '@/api/message'
import NoticeNav from './notice-nav/index.vue'

@Component({
  components: { NoticeNav }
})
export default class NoticeList extends Vue {
  catalog = 'notice'

  pageData: PageData<any> = null as any

  get checkedRows () {
    return this.pageData.rows.filter(v => v.checked)
  }

  @Provide() markRead (row?: any) {
    const rows = (row ? [row] : this.checkedRows).filter((v: any) => !v.hasRead)
    if (rows.length < 1) return
    markRead(rows.map((v: any) => v.id)).then(data => {
      this.refreshUnreadCount()
      rows.forEach(v => {
        v.hasRead = true
      })
    })
  }

  @Provide() markAllRead () {
    markReadByCategory(this.catalog as any).then(data => {
      this.refreshUnreadCount()
      this.pageData.rows.forEach(v => {
        v.hasRead = true
      })
    })
  }

  @Provide() remove (row?: any) {
    const rows = row ? [row] : this.checkedRows
    deteteInbatch(rows.map((v: any) => v.id)).then(() => {
      this.pageData.reload(true)
      this.refreshUnreadCount()
      this.$message.success('已删除')
    })
  }

  @Provide() removeAll () {
    deleteAllByCategory(this.catalog as any).then(() => {
      this.pageData.reload(true)
      this.refreshUnreadCount()
      this.$message.success('已清空')
    })
  }

  refreshUnreadCount () {
    this.$root.$emit('refreshUnreadCount')
  }

  created () {
    const loader = (params: PageQueryParams) => {
      const extra: any = Object.assign({ category: 'notice' }, params)
      return queryMessages(extra).then(data => {
        data.content.forEach((w: any) => {
          w.checked = false
        })
        return data
      })
    }
    this.pageData = new PageData(loader, { size: 10 })

    this.pageData.load()
  }
}
</script>

<style lang="scss" module>
@import "~@/styles/vars.scss";

$header-height: 40px;

.container {

}

.toolbar {
  height: $header-height;
  background-color: $bg-color;
  border-bottom: 1px solid $border-split-color;
  box-sizing: border-box;
}

.item {
  padding: 8px;
  box-sizing: border-box;
  display: flex;
  border-bottom: 1px solid $border-color;
  &:hover {
    background-color: $bg-body-color;
  }
}

.checkbox {
  flex: 0 0 auto;
  width: 24px;
  padding-left: 8px;
  display: flex;
  align-items: center;
  // background-color: cyan;
  // visibility: hidden;
}

.avatar {
  width: 16px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
}

.content {
  flex: 1 1 auto;
}

.header {
  display: flex;
  justify-content: space-between;
}

.title {
  padding-right: 16px;
}

.datetime {
  color: $text-secondary-color;
  font-size: 12px;
  flex: 0 0 auto;
}

.text {
  margin-top: 4px;
  color: $text-secondary-color;
  font-size: 12px;
}

.dot {
  width: 6px;
  height: 6px;
  border-radius: 100%;
  background-color: $color-primary;
}

</style>
